.slide-left-enter-active {
  left: 100%;
  animation: slideIn 0.2s forwards linear;
}
.slide-left-leave-active {
  left: 0%;
  animation: slideOut 0.2s forwards linear;
}

@keyframes slideIn {
  0% {
    left: 100%;
  }
  100% {
    left: 0%;
  }
}
@keyframes slideOut {
  0% {
    left: 0%;
  }
  100% {
    left: 100%;
  }
}


/* 从底部滑动到顶部 */
.slide-top-enter-active {
  top: 100%;
  animation: slideTop 0.3s forwards linear;
}
.slide-top-leave-active {
  top: 0%;
  animation: slideBottom 0.3s forwards linear;
}

@keyframes slideTop {
  0% {
    top: 100%;
  }
  100% {
    top: 0%;
  }
}
@keyframes slideBottom {
  0% {
    top: 0%;
    transform: translateY(0%);
  }
  100% {
    top: 100%;
    transform: translateY(100%);
    transition: all 0.2s ease-in-out;
  }
}

/* 淡入动画效果 */
.fade-enter-active {
  opacity: 0;
  animation: fadeIn 0.1s forwards linear;
}
.fade-leave-active {
  opacity: 1;
  animation: fadeOut 0.1s forwards linear;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
